<template>
	<view style="padding: 10px;">
		<u-form :model="formData" ref="uForm">
			<view class="item-title">基本信息</view>
			<u-form-item label="姓名"  :border-bottom="false" label-width="170" prop="xm" >
				<u-input v-model="formData.xm"  border="true" :disabled="disabled" />
			</u-form-item>
			<u-form-item label="性别"  :border-bottom="false"  label-width="170" >
				<u-radio-group v-model="formData.xb" :disabled="disabled">
					<u-radio v-for="(item, index) in genderList" :key="index" :name="item.label">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="民族"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.mz" border="true" :disabled="disabled"/>
			</u-form-item>
			<u-form-item label="身份证号"  :border-bottom="false"  label-width="170" prop="sfzh" >
				<u-input v-model="formData.sfzh" @click="keyBoardShow=!keyBoardShow" disabled="true" border="true" />
			</u-form-item>
			<u-form-item label="政治面貌"  :border-bottom="false"  label-width="170" >
				<u-radio-group v-model="formData.zzmm" :disabled="disabled">
					<u-radio v-for="(item, index) in zzmmList" :key="index" :name="item.label">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="婚姻状况"  :border-bottom="false"  label-width="170" >
				<u-radio-group v-model="formData.hyzk" :disabled="disabled">
					<u-radio v-for="(item, index) in hyzkList" :key="index" :name="item.label">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="联系方式"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.lxfs" maxlength="11" border="true" :disabled="disabled"/>
			</u-form-item>
			<u-form-item label="来本辖区日期"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.lbxqrq" @click="show1=!show1" disabled="true" border="true" />
			</u-form-item>
			<u-form-item label="户籍地址"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.hjdz" border="true" type="textarea"  :disabled="disabled"/>
			</u-form-item>
			<view class="item-title">居住信息</view>
			<u-form-item label="居住处所"  :border-bottom="false"  label-width="170" >
				<u-radio-group v-model="formData.jzcs" :disabled="disabled">
					<u-radio v-for="(item, index) in jzcsList" :key="index" :name="item.label">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="居住地址"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.jzdz" type="textarea"  border="true" :disabled="disabled"/>
			</u-form-item>
			<u-form-item label="入住时间"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.rzsj" @click="show2=!show2" disabled="true" border="true" />
			</u-form-item>
			<u-form-item label="与房主关系"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.yfzgx" border="true" :disabled="disabled"/>
			</u-form-item>
			<view v-if="formData.jzcs === '租借房屋'">
				<u-form-item label="租住时间"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.zzsj" @click="show3=!show3" disabled="true" border="true" />
				</u-form-item>
				<u-form-item label="同室关系"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.tsgx" border="true" :disabled="disabled"/>
				</u-form-item>
				<u-form-item label="出租人姓名"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.czrxm" border="true" :disabled="disabled"/>
				</u-form-item>
				<u-form-item label="出租人身份证号"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.czrsfzh" @click="keyBoardShow2=!keyBoardShow2" disabled="true" border="true" />
				</u-form-item>
				<u-form-item label="出租人电话"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.czrdh" maxlength="11" border="true" :disabled="disabled"/>
				</u-form-item>
				<u-form-item label="房屋租借备案证号"  :border-bottom="false"  label-width="170" >
					<u-input v-model="formData.fwzjbazh" border="true" :disabled="disabled"/>
				</u-form-item>
			</view>
			<u-form-item label="备注"  :border-bottom="false"  label-width="170" >
				<u-input v-model="formData.bz" border="true"  :disabled="disabled"/>
			</u-form-item>
			<u-button v-if="!disabled" @click="save(1,false)" :disabled="submitBtn"  type="primary" >保存</u-button>
			<view class="buttons" v-if="hasChecked">
				<u-button @click="checked()" :disabled="submitBtn" type="primary">审核通过</u-button>
				<u-button @click="unChecked()" :disabled="submitBtn" type="success">审核不通过</u-button>
			</view>
		</u-form>
		<u-modal show-cancel-button="true"  @confirm="confirm" v-model="unCheckedModalShow" :title="content" >
			<view style="padding: 10px;">
				<u-input v-model="formData.unCheckedReason" border="true" :auto-height="true" />
			</view>
			
		</u-modal>
		<u-calendar v-if="!disabled" v-model="show1" :mode="mode" @change="changeDate1"></u-calendar>
		<u-calendar v-if="!disabled" v-model="show2" :mode="mode" @change="changeDate2"></u-calendar>
		<u-calendar v-if="!disabled" v-model="show3" :mode="mode" @change="changeDate3"></u-calendar>
		<u-keyboard v-if="!disabled" ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange1" @backspace="backspace1" v-model="keyBoardShow"></u-keyboard>
		<u-keyboard v-if="!disabled" ref="uKeyboard" mode="card" tips="身份证" :safe-area-inset-bottom="true" @change="valChange2" @backspace="backspace2" v-model="keyBoardShow2"></u-keyboard>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	export default {
		computed:mapState(['user', ]),
		data() {
			return {
				unCheckedModalShow:false,
				content:'请输入原因',
				disabled:false,
				hasChecked:false,
				keyBoardShow:false,
				keyBoardShow2:false,
				submitBtn:false,
				show1:false,
				show2:false,
				show3:false,
				mode:'date',
				formData:{
					xm:'',
					xb:'男',
					mz:'',
					sfzh:'',
					zzmm:'群众',
					hyzk:'未婚',
					lxfs:'',
					lbxqrq:this.$util.getNowD(),
					hjdz:'',
					jzcs:'租借房屋',
					jzdz:'',
					rzsj:this.$util.getNowD(),
					zzsj:this.$util.getNowD(),
					yfzgx:'',
					tsgx:'',
					czrxm:'',
					czrsfzh:'',
					czrdh:'',
					fwzjbazh:'',
					bz:'',
					tjr:'',	//提交人
					state:'1',
					unCheckedReason:''
				},
				genderList:[
					{label:'男'},
					{label:'女'}
				],
				zzmmList:[
					{label:'团员'},
					{label:'党员'},
					{label:'群众'}
				],
				hyzkList:[
					{label:'未婚'},
					{label:'已婚'},
				],
				jzcsList:[
					{label:'租借房屋'},
					{label:'单位内部'},
					{label:'亲友家中'},
					{label:'自购房屋'},
					{label:'工地现场'},
					{label:'医院'},
					{label:'旅馆'},
					{label:'其他'}
				],
				rules: {
					xm: [
						{ 
							required: true, 
							message: '请输入姓名',  
							trigger: ['change','blur'],
						}
					],
					sfzh: [
						{
							required: true, 
							message: '请输入身份证号', 
							trigger: ['change','blur'],
						},
						{
							min: 18, 
							message: '身份证号不能少于18个字符', 
							trigger: ['change','blur']
						}
					]
				}
				
			}
		},
		methods:{
			doSave(){
				this.submitBtn = true;
				const that = this;
				this.$http.post("/xxcj/ldrkdj/save",this.formData).then(res=>{
					let data = res.data.data;
					if(data){
						that.$refs.uToast.show({
							title: '保存成功',
							type: 'success',
							callback: ()=>{
								let pages = getCurrentPages(); // 当前页面
								let prePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
								     success: function() {
										prePage.onLoad(); // 执行前一个页面的onLoad方法
								     }
								});
							}
						})
					}else{
						this.submitBtn = false;
						this.$refs.uToast.show({
							title: '保存异常,请稍后重试',
							type: 'error'
						})
					}
				}).catch(e=>{
					this.submitBtn = false;
					this.$refs.uToast.show({
						title: '保存异常,请稍后重试',
						type: 'error'
					})
				})
			},
			save(state,isCheck){
				const that = this;
				if(state)
					this.formData.state = state;
				if(isCheck){
					this.doSave();
				}else{
					this.formData.tjr = this.user.user.id;
					this.$refs.uForm.validate(valid => {
						if (valid) {
							that.doSave();
						} else {
							this.submitBtn = false;
							console.log('表单信息不完整');
						}
					});
				}
				
			},
			changeDate1(e){
				this.formData.lbxqrq = e.result;
			},
			changeDate2(e){
				this.formData.rzsj = e.result;
			},
			changeDate3(e){
				this.formData.zzsj = e.result;
			},
			valChange1(val){
				if(this.formData.sfzh.length<18){
					this.formData.sfzh += val;
				}
			},
			backspace1(){
				if(this.formData.sfzh.length) this.formData.sfzh = this.formData.sfzh.substr(0, this.formData.sfzh.length - 1);
			},
			valChange2(val){
				if(this.formData.czrsfzh.length<18){
					this.formData.czrsfzh += val;
				}
			},
			backspace2(){
				if(this.formData.czrsfzh.length) this.formData.czrsfzh = this.formData.czrsfzh.substr(0, this.formData.czrsfzh.length - 1);
			},
			//审核通过
			checked(){
				this.save(2,true);
			},
			//审核不通过
			unChecked(){
				this.unCheckedModalShow = true;
			},
			confirm(){
				this.save(3,true);
			},
			checkHasPermission(){
				if(this.formData.id){
					//没有修改权限，或者已审核通过，或者当点内容非本用户，设置内容为禁用状态
					if(this.user.user.auths.indexOf('edit')<0||this.formData.state==='2'|| this.formData.tjr != this.user.user.id){
						this.disabled = true;
					}
					//有审核权限，并且未审核状态，并且非本用户内容
					if(this.user.user.auths.indexOf('check')>-1&&this.formData.state==='1'&&this.formData.tjr != this.user.user.id){
						this.hasChecked = true;
					}
				}
			}
		},
		onLoad(options) {
			this.$refs.uForm.setRules(this.rules);
			Object.assign(this.formData,options.item?JSON.parse(options.item):{});
			this.checkHasPermission();
		}
	}
</script>

<style lang="scss" scoped>
	.item-title{
		position: relative;
		font-size: 12px;
		padding-left: 8px;
		line-height: 1;
		margin: 8px auto;
	}
	.item-title::after{
		position: absolute;
		width: 4px;
		top: -1px;
		height: 16px;
		content: "";
		left: 0;
		border-radius: 10px;
		background-color: #2979ff;
	}
	.buttons{
		display: flex;
		width: 100%;
		margin-top: 20upx;
		justify-content: center;
	}
	.buttons u-button{
		margin: 0 50rpx;
	}
</style>
